<template>
	<div class="diygw-col-24">
		<div v-if="specs.length > 0">
			<VueDraggable v-bind="{ animation: 200, disabled: false, ghostClass: 'ghost' }" v-model="specs" class="list-group" ghost-class="ghost">
				<div v-for="(element, itemIndex) in specs" class="box sku-spec flex flex-direction-column margin-bottom">
					<div class="flex margin-bottom-xs align-center justify-between">
						<el-input style="width: 200px !important; flex: unset" placeholder="请输入规格名称" v-model="element.title"> </el-input>
						<div class="toolbar">
							<i class="diyicon handle diyicon-yidongxuanze" />
							<el-tooltip content="上移" placement="bottom">
								<i class="diy-icon-top" @click.stop="move(itemIndex, 'up')" />
							</el-tooltip>
							<el-tooltip content="下移" placement="bottom">
								<i class="diy-icon-down" @click.stop="move(itemIndex, 'down')" />
							</el-tooltip>
							<el-tooltip content="新增规格组" placement="bottom">
								<i class="diy-icon-add" @click.stop="addSpec()" />
							</el-tooltip>
							<el-tooltip content="删除规格组" placement="bottom">
								<i class="diy-icon-close" @click.stop="removeSpec(itemIndex)" />
							</el-tooltip>
						</div>
					</div>
					<div class="flex flex-wrap align-center">
						<VueDraggable
							v-bind="{ animation: 200, disabled: false, ghostClass: 'ghost' }"
							v-model="element.datas"
							class="flex flex-wrap align-center sku-spec-item"
							ghost-class="ghost"
						>
							<div v-for="(subitem, subindex) in element.datas" class="margin-right-xs spec-item margin-bottom-xs" style="width: 150px">
								<el-input v-model="subitem.title"> </el-input>
								<div class="spec-toolbar">
									<el-tooltip content="删除规格值" placement="bottom">
										<i class="diy-icon-close" @click.stop="removeSpecItem(itemIndex, subindex)" />
									</el-tooltip>
								</div>
							</div>
						</VueDraggable>
						<div class="margin-right-xs margin-bottom-xs text-xs" @click="addSpecIndex(itemIndex)">新增规格值</div>
					</div>
				</div>
			</VueDraggable>
		</div>
		<el-button class="diygw-col-24 margin-bottom-xs" @click="addSpec">新增规格</el-button>
		<DiySkutable v-model="skus" :specs="specs" :columns="userColumns" ref="skuref"></DiySkutable>
	</div>
</template>

<script setup name="DiySku">
import { ElMessage } from 'element-plus';
import { useVModels } from '@vueuse/core';
import { VueDraggable } from 'vue-draggable-plus';
import DiySkutable from './skutable.vue';
import { ref } from 'vue';
const props = defineProps({
	skus: {
		type: Array,
		default: () => {
			return [];
		},
	},
	specs: {
		//规格配置
		type: Array,
		default: () => {
			return [];
		},
	},
	columns: {
		//自定义sku属性
		type: Array,
		default: () => {
			return [];
		},
	},
	filterable: {
		//是否开启sku搜索
		type: Boolean,
		default: true,
	},
});

const emit = defineEmits(['update:specs', 'update:skus']);
const { skus, specs } = useVModels(props, emit);
const removeSpec = (index) => {
	specs.value.splice(index, 1);
};

const removeSpecItem = (index, subindex) => {
	specs.value[index].datas.splice(subindex, 1);
};

const addSpecIndex = (index) => {
	let id = specs.value[index].datas.length + specs.value[index].id;
	specs.value[index].datas.push({
		title: '',
		id: id + '' + new Date().getTime(),
	});
};

const addSpec = () => {
	let id = (specs.value.length + 1) * 1000;
	specs.value.push({
		id: id,
		title: '',
		datas: [
			{
				title: '',
				id: id + '' + new Date().getTime(),
			},
		],
	});
};

const userColumns = ref(JSON.parse(JSON.stringify(props.columns)));
userColumns.value.push({
	title: '关键词',
	id: 'keywords',
	readOnly: true,
	defaultValue: ({ columns }) => {
		return columns
			.map((item) => {
				return item.showValue;
			})
			.join(' ');
	},
});

const move = (itemIndex, dir) => {
	let comps = specs.value;
	let item = comps[itemIndex];
	if (dir == 'up') {
		if (itemIndex == 0) {
			ElMessage.error('已经是第一个了！');
			return;
		}
		const swap = comps[itemIndex - 1];
		const tmp = swap;
		comps[itemIndex - 1] = item;
		comps[itemIndex] = tmp;
	} else {
		if (itemIndex == comps.length - 1) {
			ElMessage.error('已经是最一个了！');
			return;
		} else {
			const swap = comps[itemIndex + 1];
			const tmp = swap;
			comps[itemIndex + 1] = item;
			comps[itemIndex] = tmp;
		}
	}
};
</script>
<style lang="scss">
.sku-spec {
	padding: 6px;
	border-radius: 5px;
	border: 1px solid #ebeef5;

	.sku-spec-item {
		padding-left: 30px;
		padding-right: 5px;
		.spec-item {
			position: relative;

			.spec-toolbar {
				top: -2px;
				right: -3px;
				position: absolute;
				display: none;
			}

			&:hover {
				.spec-toolbar {
					display: block;
				}
			}
		}
	}
}
</style>
